<template>
  <div class="rule-group-add">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/payroll/salary/group">返回</BreadcrumbItem>
        <BreadcrumbItem to="/payroll/salary/rule/attendance">考勤计薪方案 /</BreadcrumbItem>
        <BreadcrumbItem>新增考勤计薪方案</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <!-- step -->

    <!-- 步骤条 -->
    <!-- <div class="steps-wrap">
      <Steps :current="current">
        <Step title="设置请假计薪规则"></Step>
        <Step title="设置加班费规则"></Step>
        <Step title="设置全勤奖、旷工扣款规则"></Step>
      </Steps>
    </div>-->

    <!-- step1 -->
    <div class="step-section none mt32" :class="{block: current === 0}">
      <div class="section">
        <div class="s-header flex">
          <h3>基本设置</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">设置此方案的名称</div>
          <div class="content-detail">
            <Form :model="formName" :label-width="110" ref="name" :rules="nameRule">
              <div class="form-item-row2">
                <FormItem label="方案名称" prop="name">
                  <Input v-model="formName.name" placeholder="请输入" class="form-input"></Input>
                </FormItem>
              </div>
            </Form>
          </div>
        </div>
      </div>

      <!-- 迟到 -->
      <div class="section">
        <div class="s-header flex">
          <h3>迟到规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">迟到规则定义当员工迟到时，如何进行扣款，迟到扣款按次数计算。</div>
          <div class="content-detail">
            <!-- <Table width="100%" :columns="columns1" class="table3" :data="data1"></Table> -->
            <div class="rule-item">
              <Form :model="formLate" :label-width="0">
                <section>
                  <div class="rule-item-titel">计算方式</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label required>
                        <Select v-model="formLate.calculation_method" class="form-input">
                          <Option value="按迟到次数扣款">按迟到次数扣款</Option>
                        </Select>
                      </FormItem>
                      <FormItem label>
                        <Input v-model="formLate.money" class="form-input">
                          <span slot="append">元/次</span>
                        </Input>
                      </FormItem>
                    </div>
                  </div>
                  <div class="rule-item-titel">个性化设置</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label>
                        每月累计迟到
                        <Input v-model="formLate.no_buckle" class="form-input-100 input-pa"></Input>次 ，不扣款
                      </FormItem>
                    </div>
                  </div>
                </section>
              </Form>
            </div>
          </div>
        </div>
      </div>

      <!-- 早退 -->
      <div class="section">
        <div class="s-header flex">
          <h3>早退规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">早退规则定义当员工早退时，如何进行扣款，早退扣款按次数计算。</div>
          <div class="content-detail">
            <!-- <Table width="100%" :columns="columns1" class="table3" :data="data1"></Table> -->
            <div class="rule-item">
              <Form :model="formEarly" :label-width="0">
                <section>
                  <div class="rule-item-titel">计算方式</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label required>
                        <Select v-model="formEarly.calculation_method" class="form-input">
                          <Option value="按早退次数扣款">按早退次数扣款</Option>
                        </Select>
                      </FormItem>
                      <FormItem label>
                        <Input v-model="formEarly.money" class="form-input">
                          <span slot="append">元/次</span>
                        </Input>
                      </FormItem>
                    </div>
                  </div>
                  <div class="rule-item-titel">个性化设置</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label>
                        每月累计早退
                        <Input v-model="formEarly.no_buckle" class="form-input-100 input-pa"></Input>次 ，不扣款
                      </FormItem>
                    </div>
                  </div>
                </section>
              </Form>
            </div>
          </div>
        </div>
      </div>

      <!-- 缺卡 -->
      <div class="section">
        <div class="s-header flex">
          <h3>缺卡规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">缺卡规则定义当员工缺卡时，如何进行扣款，缺卡扣款按次数计算。</div>
          <div class="content-detail">
            <!-- <Table width="100%" :columns="columns1" class="table3" :data="data1"></Table> -->
            <div class="rule-item">
              <Form :model="formMiss" :label-width="0">
                <section>
                  <div class="rule-item-titel">计算方式</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label required>
                        <Select v-model="formMiss.calculation_method" class="form-input">
                          <Option value="按缺卡次数扣款">按缺卡次数扣款</Option>
                        </Select>
                      </FormItem>
                      <FormItem label>
                        <Input v-model="formMiss.money" class="form-input">
                          <span slot="append">元/次</span>
                        </Input>
                      </FormItem>
                    </div>
                  </div>
                  <div class="rule-item-titel">个性化设置</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label>
                        每月累计缺卡
                        <Input v-model="formMiss.no_buckle" class="form-input-100 input-pa"></Input>次 ，不扣款
                      </FormItem>
                    </div>
                  </div>
                </section>
              </Form>
            </div>
          </div>
        </div>
      </div>

      <!-- 旷工 -->
      <div class="section">
        <div class="s-header flex">
          <h3>旷工规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">旷工规则定义当员工旷工时，如何进行扣款，旷工扣款按次数计算。</div>
          <div class="content-detail">
            <!-- <Table width="100%" :columns="columns1" class="table3" :data="data1"></Table> -->
            <div class="rule-item">
              <Form :model="formAbsenteeism" :label-width="0">
                <section>
                  <div class="rule-item-titel">计算方式</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label required>
                        <Select v-model="formAbsenteeism.calculation_method" class="form-input">
                          <Option value="按旷工次数扣款">按旷工次数扣款</Option>
                        </Select>
                      </FormItem>
                      <FormItem label>
                        <Input v-model="formAbsenteeism.money" class="form-input">
                          <span slot="append">元/次</span>
                        </Input>
                      </FormItem>
                    </div>
                  </div>
                  <div class="rule-item-titel">个性化设置</div>
                  <div class="rule-item-form">
                    <div class="form-item-row2">
                      <FormItem label>
                        每月累计旷工
                        <Input v-model="formAbsenteeism.no_buckle" class="form-input-100 input-pa"></Input>次 ，不扣款
                      </FormItem>
                    </div>
                  </div>
                </section>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- step2 -->
    <div class="step-section none step-section2" :class="{block: current === 1}">
      <div class="section">
        <div class="s-header flex">
          <h3>加班费计算规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">员工加班，企业给予的额外的补偿。补偿方式，与考勤系统的设置一致。</div>
          <div class="content-detail">
            <Table width="100%" :columns="columns1" class="table3" :data="data1"></Table>
          </div>
        </div>
      </div>
    </div>

    <!-- step3 -->
    <div class="step-section none" :class="{block: current === 2}">
      <div class="section">
        <div class="s-header flex">
          <h3>旷工扣款规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">计算方式，与考勤规则中的旷工扣款规则一致。</div>
          <div class="content-detail">
            <Form label="考勤计薪方案">
              <div class="form-item-row form-item-row2">
                <FormItem label="模板名称" class="form-item">
                  <Input v-model="formItem.input" placeholder="工号" class="form-input"></Input>
                  <Tooltip content="旷工扣款 = XX元/小时 旷工时长" placement="top">
                    <Icon type="ios-help-circle" size="18" class="ml12" />
                  </Tooltip>
                </FormItem>
                <div class="form-item-tip">按固定金额扣款，需在【考勤规则】中设置</div>
              </div>
            </Form>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="s-header flex">
          <h3>全勤奖扣款规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">满足以下任意一项，扣发全勤奖</div>
          <div class="content-detail">
            <ul class="checkbox-list flex-box">
              <li class="checkbox-item mr24" v-for="(item, index) in checkboxList" :key="index">
                <Checkbox>{{item.name}}</Checkbox>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom-btns-wrap">
      <div class="btns">
        <!-- <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
        <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>-->
        <!-- <Button class="pierced mr12" @click="preview" v-if="current == 2">预览</Button> -->
        <Button class="save-btn-green" @click="save" v-if="current == 0">保存</Button>
      </div>
    </div>

    <!-- modal  -->

    <Modal v-model="modal2">
      <p slot="header">设置加班计费规则 - 工作日加班</p>
      <Form :model="formItem" :label-width="120">
        <div class="form-item-row2">
          <FormItem label="薪资组名称">
            <Input v-model="formItem.name" placeholder="薪资组名称" class="form-input"></Input>
            <Tooltip placement="top">
              <Icon type="ios-help-circle" size="18" class="ml4" />
              <div slot="content" class="tooltip-custom">加班工资=计薪基数÷月计薪天数÷日标准计薪时长 × 计薪比例 × 加班时长</div>
            </Tooltip>
          </FormItem>
        </div>

        <div class="form-item-row2">
          <FormItem label="计薪基数">
            <div for class="form-c-lable form-c-active">
              基本工资
              <span class="active-icon"></span>
            </div>
            <div for class="form-c-lable">
              岗位工资
              <span class="active-icon"></span>
            </div>
            <div for class="form-c-lable">绩效工资</div>
            <div for class="form-c-lable">季度奖</div>
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="折算标准">
            <Select class="form-input">
              <Option value="beijing">模版</Option>
              <Option value="beijing">模版</Option>
            </Select>
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label>
            <Input v-model="formItem.name" placeholder="请输入" class="form-input"></Input>小时/天
          </FormItem>
          <div class="form-item-tip">用于计算每天、每个小时的工资标准</div>
        </div>
        <div class="form-item-row2">
          <FormItem label="计薪比例">
            <Input v-model="formItem.name" placeholder="请输入" class="form-input"></Input>%
          </FormItem>
        </div>
      </Form>
    </Modal>

    <!-- modal end -->
  </div>
</template>


<script>
import { attendance, salary } from "@/apis";
import http from "@/utils/http";
export default {
  data() {
    return {
      current: 0,

      modal2: false,
      formItem: {
        input: ""
      },
      columns: [
        {
          title: "加班类型",
          key: "name"
        },
        {
          title: "加班费规则",
          key: "age"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openModal(params.index);
                    }
                  }
                },
                "设置"
              )
            ]);
          }
        }
      ],
      columns1: [
        {
          title: "加班类型",
          key: "name"
        },
        {
          title: "加班费规则",
          key: "age"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openModal(params.index);
                    }
                  }
                },
                "设置"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          name: "工作日加班",
          age: "按工资一定比例补偿"
        }
      ],
      checkboxList: [
        {
          name: "事假"
        },
        {
          name: "短期病假"
        },
        {
          name: "迟到"
        },
        {
          name: "早退"
        },
        {
          name: "旷工"
        },
        {
          name: "年假"
        },

        {
          name: "调休"
        },
        {
          name: "婚假"
        },
        {
          name: "产假"
        }
      ],

      formName: {
        name: ""
      },
      formLate: {
        id: "",
        type: 1,
        calculation_method: "按迟到次数扣款",
        money: "0.00",
        no_buckle: 0
      },
      formEarly: {
        id: "",
        type: 2,
        calculation_method: "按早退次数扣款",
     money: "0.00",
        no_buckle: 0
      },
      formMiss: {
        id: "",
        type: 3,
        calculation_method: "按缺卡次数扣款",
        money: "0.00",
        no_buckle: 0
      },
      formAbsenteeism: {
        id: "",
        type: 4,
        calculation_method: "按旷工次数扣款",
           money: "0.00",
        no_buckle: 0
      },
      nameRule: {
        name: [{ required: true, message: "请填写方案名称", trigger: "blur" }]
      }
    };
  },
  methods: {
    next() {
      if (this.current == 2) {
        this.current = 0;
      } else {
        this.current += 1;
      }
    },
    prev() {
      if (this.current == 0) {
        this.current = 0;
      } else {
        this.current -= 1;
      }
    },
    modal3() {
      this.modal2 = true;
    },

    // 提交保存
    save() {
      let _this = this;
      this.$refs["name"].validate(valid => {
        if (valid) {
          let sdata = [
            this.formLate,
            this.formEarly,
            this.formMiss,
            this.formAbsenteeism
          ];
          http
            .post(salary.salaryrulecreate, {
              data: { data: { name: this.formName.name, list: sdata } }
            })
            .then(res => {
              console.log(res);
              if (res.e == "9999") {
                _this.$Message.success("操作成功!");
                setTimeout(() => {
                  _this.$router.push("/payroll/salary/rule/attendance");
                }, 200);
              }
            })
            .catch(e => {
              console.log(e);
            });
        } else {
          // this.$Message.error("Fail!");
        }
      });
    },

    // 编辑
    getDetail() {
      //详情也是请求列表接口
      let _this = this;
      http
        .get(salary.salaryrulelist)
        .then(res => {
          if (res.e == "9999") {
            let d = res.data.list.data;
            _this.formName.name = d[0].name || "";
            _this.formLate = d[0];
            _this.formEarly = d[1];
            _this.formMiss = d[2];
            _this.formAbsenteeism = d[3];
          }
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    let edit = this.$route.query.edit;
    if (edit) {
      this.getDetail();
    } else {
    }
  }
};
</script>
<style lang="scss" scoped src='../../index.scss'>
</style>